import { useState, useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { AuthContext } from '../../contexts/AuthContext';
import axios from 'axios';
import { message } from 'antd';
import { aesEcbEncrypt } from '../../utils/encrypt';
import '@/styles/LoginRegisterCommon.css';
import myImage1 from '../../assets/jpg/齿轮.png'
import { EyeTwoTone, EyeInvisibleTwoTone } from '@ant-design/icons';
const Login = () => {
    const { login } = useContext(AuthContext);
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [showPassword, setShowPassword] = useState(false);
    const navigate = useNavigate()
    const [isAnimatedUsername, setIsAnimatedUsername] = useState(false)
    const [isAnimatedPassword, setIsAnimatedPassword] = useState(false);

    const handleFocus = (params) => {
        if (params === 'username') setIsAnimatedUsername(true)
        if (params === 'password') setIsAnimatedPassword(true)
    }
    const handleBlur = (params) => {
        if (params === 'username' && !username) setIsAnimatedUsername(false);
        if (params === 'password' && !password) setIsAnimatedPassword(false);
    }

    const handleSubmit = async (e) => {
        e.preventDefault();
        if (!username || !password) {
            message.error('用户名或密码不能为空');
            return;
        }
        try {
            const encryptedPwd = await aesEcbEncrypt(password, "d8d73c9f91ad4fc689cf1dac563dc906");
            const res = await axios.post('/api/v1/account/login', {
                username,
                password: encryptedPwd
            });
            if (res.data.code === 0) {
                login(res.data.data.token, res.data.data.userInfo);
                message.success('登录成功');
                navigate('/upload');
            } else {
                message.error(res.data.msg);
            }
        } catch (err) {
            message.error('登录失败，请重试');
        }
    };
    const handleRegisterClick = () => {
        navigate('/register')
    }
    const togglePasswordVisibility = () => {
        setShowPassword(!showPassword);
    };
    return <div className="big">
        <div className="leftcircle circle" style={{
            display: 'flex',
            justifyContent: 'center', alignItems: 'center'
        }}>  <img src={myImage1} alt="description" width="60" /></div>
        <div className="conveyer leftconveyer"><span></span><span></span></div>
        <div className="container">
            <form onSubmit={handleSubmit}>
                <h2>Login</h2>
                <div className="item">
                    <input
                        type="text" value={username}
                        onFocus={() => handleFocus('username')}
                        onBlur={() => handleBlur('username')}
                        onChange={(e) => setUsername(e.target.value)}
                    />
                    <label className={isAnimatedUsername ? 'animated-class' : ''}>Username</label>
                </div>
                    <div className="item" style={{ position: 'relative' }}>
                        <input
                            type={showPassword ? 'text' : 'password'}
                            onFocus={() => handleFocus('password')}
                            onBlur={() => handleBlur('password')}
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                        />
                        <label className={isAnimatedPassword ? 'animated-class' : ''}>Password</label>
                        <span
                            onClick={togglePasswordVisibility}
                            style={{
                                position: 'absolute',
                                right: '10px',
                                top: '80%',
                                transform: 'translateY(-50%)',
                                cursor: 'pointer',
                                color: '#666'
                            }}
                        >
                            {showPassword ? <EyeTwoTone /> : <EyeInvisibleTwoTone />}
                        </span>
                    </div>
                <button>Enter</button>
                <div className="conversion" onClick={handleRegisterClick}>
                    尚无账号？前去注册
                </div>
            </form>

        </div>
        <div className="conveyer rightconveyer"><span></span><span></span></div>
        <div className="rightcircle circle" style={{
            display: 'flex',
            justifyContent: 'center', alignItems: 'center'
        }}> <img src={myImage1} alt="description" width="60" /></div>
    </div>
}
export default Login;